{% extends 'dir/basic.html' %}

{% block title %} tools_box - 工具箱 {% endblock %}

{% block tools_box %}"box active"{% endblock %}

{% block body %}
    <link rel="stylesheet" href="{{ url_for('static', filename='CSS/tools_box.css') }}">

    <div class="toolbox-container">
        <h2 class="grid-title">创意工具箱</h2>
        <div class="tools-grid">
            <!-- 工具项 1 -->
            <a href="/tools/color-picker" class="tool-card">
                <i class="fas fa-palette tool-icon"></i>
                <h3 class="tool-title">色彩提取器<br></h3>
                <p class="tool-desc">智能识别图片色彩方案，生成专业调色板</p>
            </a>

            <!-- 工具项 2 -->
            <a href="/tools/image-compress" class="tool-card">
                <i class="fas fa-file-image tool-icon"></i>
                <h3 class="tool-title">图片优化器</h3>
                <p class="tool-desc">批量压缩图片大小，保持画质完美</p>
            </a>

            <!-- 工具项 3 -->
            <a href="/tools/code-format" class="tool-card">
                <i class="fas fa-code tool-icon"></i>
                <h3 class="tool-title">代码格式化</h3>
                <p class="tool-desc">支持10+语言的智能代码美化工具</p>
            </a>

            <!-- 工具项 4 -->
            <a href="/tools/md-editor" class="tool-card">
                <i class="fas fa-markdown tool-icon"></i>
                <h3 class="tool-title">Markdown 编辑器</h3>
                <p class="tool-desc">实时预览的沉浸式写作工具</p>
            </a>

            <!-- 工具项 5 -->
            <a href="/tools/qrcode-gen" class="tool-card">
                <i class="fas fa-qrcode tool-icon"></i>
                <h3 class="tool-title">二维码生成器</h3>
                <p class="tool-desc">自定义样式二维码一键生成</p>
            </a>

            <!-- 工具项 6 -->
            <a href="/tools/data-vis" class="tool-card">
                <i class="fas fa-chart-bar tool-icon"></i>
                <h3 class="tool-title">数据可视化</h3>
                <p class="tool-desc">快速生成交互式图表报告</p>
            </a>
        </div>
    </div>
{% endblock %}



